<template>
    <admin-framework :breadcrumb="breadcrumb" :title="breadcrumb.title">
        <collapse-panel class="panel-success" title="编辑用户" v-if="user !== undefined">
            <input-label type="text" label="Name" v-model="user.name"/>
            <input-label type="Email" label="Email" v-model="user.email" :disabled="true"/>
            <input-label type="password" label="Change Password" v-model="user.new_password"/>
            <div class="form-group">
                <label class="btn-block">Avatar</label>
                <div>
                    <img :src="user.avatar" class="img-rounded" width="100" height="100"/>
                </div>
                <upload-file url="/file/upload/image" v-model="user.avatar">
                    <button class="btn btn-success fa fa-upload m-t-5"></button>
                </upload-file>
            </div>
            <div class="form-group">
                <label>角色</label>
                <selector-i id="role" :data="roles" v-model="role"/>
            </div>
            <div class="form-group clearfix">
                <button class="btn btn-primary" @click="updateUser">提交</button>
            </div>
        </collapse-panel>
        <load-animation :load="load" :timeout="5000"/>
    </admin-framework>
</template>

<style>
    .cascader-dropdown-item:last-child {
        margin-right: 0;
    }

</style>

<script>
    /* eslint-disable no-undef */

    import AdminFramework from '../../layout/framework/AdminFramework';
    import CollapsePanel from 'vue-fiu-ui/src/main/js/components/panel/CollapsePanel';
    import InputLabel from 'vue-fiu-ui/src/main/js/components/input/InputLabel';
    import LoadAnimation from 'vue-fiu-ui/src/main/js/components/animation/Loading';
    import UploadFile from 'vue-fiu-ui/src/main/js/components/widget/UploadFile';
    import SelectorI from 'vue-fiu-ui/src/main/js/components/select/Selector';

    export default {
        components: {
            UploadFile,
            LoadAnimation,
            InputLabel,
            CollapsePanel,
            AdminFramework,
            SelectorI
        },
        data () {
            return {
                breadcrumb: {
                    title: '编辑用户',
                    links: [
                        {
                            label: 'Home',
                            url: {name: 'Home'}
                        }, {
                            end: true,
                            label: 'Edit User',
                            url: '#'
                        }
                    ]
                },
                load: true,
                id: parseInt(this.$route.query.id),
                user: undefined,
                roles: [],
                role: {}
            };
        },
        methods: {
            checkData () {
                if (isNaN(this.id)) {
                    this.$notify.error('无法修改此用户');
                    this.$router.back();
                } else {
                    this.getUserInfo();
                }
            },
            getUserInfo () {
                this.load = true;
                axios.get('/user/' + this.id).then(res => {
                    this.user = res.data.data;
                    this.load = false;
                    let roles = this.user.roles;
                    if (roles.length > 0) {
                        this.role = {
                            label: roles[0].display_name,
                            id: roles[0].id
                        };
                    }
                    this.getRoles();
                });
            },
            updateUser () {
                if (this.user !== undefined) {
                    let data = this.user;
                    data.roles_id = this.role.value;
                    delete data.roles;
                    axios.put('/user/' + this.user.id, data).then(res => {
                        if (res.data.success === false) return this.$notify.error(res.data.data);
                        this.$notify.success(res.data.data);
                    });
                }
            },
            getRoles () {
                axios.get('admin/user/role').then(res => {
                    let data = res.data.data;
                    let temp = [];
                    data.forEach((item) => {
                        temp.push({
                            label: item.display_name,
                            value: item.id
                        });
                    });
                    this.roles = temp;
                });
            }
        },
        mounted () {
            this.checkData();
        }
    };
</script>

<style scoped>

</style>
